﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<style>
    .texts-input {
        margin-top: 20px; /* 每个文本框下方留出20px的间距 */
        width: 100%;
    }
    .container-fluid {
        padding: 0;
        margin: 0;
        height: 100vh;
        display: flex;
    }
    .left-panel {
        width: 250px;
        background-color: #f8f9fa;
        border-right: 1px solid #ddd;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
    }
    .right-panel {
        flex: 1;
        padding: 10px;
        overflow-y: auto;
        box-sizing: border-box;
    }
    .tree-title {
        font-weight: bold;
        margin-bottom: 10px;
        padding: 5px;
        background-color: #e9ecef;
        border-radius: 3px;
    }
    .search-box {
        margin-bottom: 20px;
    }
    .page-container {
        height: calc(100vh - 200px);
        overflow-y: auto;
    }
    /* 树形结构样式 */
    .layui-tree {
        background: none;
    }
    .layui-tree-entry {
        padding: 2px 0;
    }
    .layui-tree-txt {
        cursor: pointer;
        padding: 3px 5px;
        border-radius: 3px;
    }
    .layui-tree-txt:hover {
        background-color: #e6f7ff;
    }
    .layui-tree-txt.selected {
        background-color: #1890ff;
        color: white;
    }
    /* 表格平整样式 */
    .layui-table {
        border-collapse: collapse;
        width: 100%;
        margin: 0;
    }
    .layui-table th,
    .layui-table td {
        padding: 8px 12px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #e6e6e6;
        line-height: 1.4;
        height: 40px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .layui-table th {
        background-color: #f2f2f2;
        font-weight: bold;
        height: 45px;
    }
    .layui-table tbody tr {
        height: 40px;
    }
    .layui-table tbody tr:nth-child(even) {
        background-color: #fafafa;
    }
    .layui-table tbody tr:hover {
        background-color: #e6f7ff;
    }
    /* 确保表格内容不换行 */
    .layui-table td {
        max-width: 120px;
        min-width: 80px;
    }
    /* 特定列的宽度调整 */
    .layui-table td:nth-child(1) { width: 80px; }  /* 产品物料编码 */
    .layui-table td:nth-child(2) { width: 100px; } /* 产品物料名称 */
    .layui-table td:nth-child(3) { width: 80px; }  /* 规格型号 */
    .layui-table td:nth-child(4) { width: 80px; }  /* 在库数量 */
    .layui-table td:nth-child(5) { width: 60px; }  /* 单位 */
    .layui-table td:nth-child(6) { width: 80px; }  /* 入库批次号 */
    .layui-table td:nth-child(7) { width: 120px; } /* 仓库 */
    .layui-table td:nth-child(8) { width: 80px; }  /* 库区 */
    .layui-table td:nth-child(9) { width: 80px; }  /* 库位 */
    .layui-table td:nth-child(10) { width: 100px; } /* 供应商编号 */
    .layui-table td:nth-child(11) { width: 120px; } /* 供应商名称 */
    .layui-table td:nth-child(12) { width: 100px; } /* 供应商简称 */
    .layui-table td:nth-child(13) { width: 100px; } /* 生产工单 */
    .layui-table td:nth-child(14) { width: 100px; } /* 入库日期 */
    .layui-table td:nth-child(15) { width: 100px; } /* 库存有效期 */
</style>
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<body>
    <div class="container-fluid">
        <!-- 左侧树形面板 -->
        <div class="left-panel">
            <div class="tree-title">
                <i class="layui-icon layui-icon-tree"></i> 物料产品分类
            </div>
            <div id="selectedCategoryInfo" style="margin-bottom: 10px; padding: 5px; background: #f0f0f0; border-radius: 3px; font-size: 12px; display: none;">
                当前选中: <span id="selectedCategoryName">无</span>
            </div>
            <div id="materialTypeTree"></div>
        </div>
        
        <!-- 右侧内容面板 -->
        <div class="right-panel">
            <div class="search-box">
                <div class="layui-form texts-input">
                    <div class="layui-form-item" style="margin-bottom: 0;">
                        <label class="layui-form-label">产品物料编码:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="productCode" name="productCode" placeholder="请输入产品物料编码" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">产品物料名称:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="productName" name="productName" placeholder="请输入产品物料名称" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">入库批次号:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="batchNumber" name="batchNumber" placeholder="请输入入库批次号" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">仓库名称:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="warehouse" name="warehouse" placeholder="请输入仓库名称" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商编码:</label>
                            <div class="layui-input-inline">
                                <input type="text" id="supplierNumber" name="supplierNumber" placeholder="请输入供应商编码" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">供应商名称:</label>
                            <div class="layui-input-inline">
                                <input type="text" id="supplierName" name="supplierName" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">库存有效期:</label>
                            <div class="layui-input-inline">
                                <input type="date" id="storageValidity" name="storageValidity" placeholder="请输入库存有效期" autocomplete="off" class="layui-input">
                            </div>
                            <button class="layui-btn layui-bg-blue" onclick="searchInventory()">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">
                                <i class="layui-icon layui-icon-refresh"></i> 重置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-container">
                @Html.AntiForgeryToken()
                <table class="layui-table" lay-size="lg">
                    <thead>
                        <tr>
                            <th>产品物料编码</th>
                            <th>产品物料名称</th>
                            <th>规格型号</th>
                            <th>在库数量</th>
                            <th>单位</th>
                            <th>入库批次号</th>
                            <th>仓库</th>
                            <th>库区</th>
                            <th>库位</th>
                            <th>供应商编号</th>
                            <th>供应商名称</th>
                            <th>供应商简称</th>
                            <th>生产工单</th>
                            <th>入库日期</th>
                            <th>库存有效期</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                    </tbody>
                </table>
                <div id="pagination"></div>
            </div>
        </div>
    </div>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['tree', 'laypage'], function(){
        var tree = layui.tree;
        var laypage = layui.laypage;
        var selectedMaterialTypeId = null; // 当前选中的物料分类ID

        // 初始化树形结构
        initMaterialTypeTree();
        
        // 初始化库存数据
        loadInventoryData();

        // 初始化物料分类树
        function initMaterialTypeTree() {
            $.ajax({
                url: '/Warehousings/GetMaterialTypeTree',
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        // 添加"全部"选项
                        var treeData = [{
                            id: 0,
                            title: '全部分类',
                            spread: true,
                            children: response.data || []
                        }];

                        tree.render({
                            elem: '#materialTypeTree',
                            data: treeData,
                            showCheckbox: false,
                            id: 'materialTypeTreeDemo',
                            click: function(obj){
                                // 移除之前的选中状态
                                $('.layui-tree-txt').removeClass('selected');
                                // 添加当前选中状态
                                $(obj.elem).find('.layui-tree-txt').first().addClass('selected');
                                
                                // 设置选中的分类ID
                                selectedMaterialTypeId = obj.data.id === 0 ? null : obj.data.id;
                                
                                // 更新选中状态显示
                                var categoryName = obj.data.title;
                                var categoryId = obj.data.id;
                                
                                if (categoryId === 0) {
                                    $('#selectedCategoryInfo').hide();
                                } else {
                                    $('#selectedCategoryName').text(categoryName + ' (ID: ' + categoryId + ')');
                                    $('#selectedCategoryInfo').show();
                                }
                                
                                // 重新加载库存数据
                                loadInventoryData();
                            }
                        });
                    } else {
                        layer.msg('加载物料分类树失败：' + response.message);
                    }
                },
                error: function() {
                    layer.msg('加载物料分类树时发生错误');
                }
            });
        }

        // 加载库存数据
        function loadInventoryData() {
            var searchParams = getSearchParams();
            var url = '/Warehousings/GetInventory';
            var params = searchParams;

            // 如果选中了具体的物料分类，使用新的API
            if (selectedMaterialTypeId && selectedMaterialTypeId > 0) {
                url = '/Warehousings/GetInventoryByMaterialType';
                params.materialTypeId = selectedMaterialTypeId;
            }

            $.ajax({
                url: url,
                type: 'GET',
                data: params,
                success: function(response) {
                    var data = response.success ? response.data : response;
                    renderInventoryTable(data);
                },
                error: function(xhr, status, error) {
                    layer.msg('加载库存数据时发生错误: ' + error);
                }
            });
        }

                 // 获取搜索参数
        function getSearchParams() {
            var params = {};
            
            // 只添加有值的参数
            var productItem = $('#productCode').val();
            if (productItem) {
                params.ProductItem = parseInt(productItem) || 0;
            }
            
            var productName = $('#productName').val();
            if (productName) {
                params.ProductName = productName;
            }
            
            var storage = $('#batchNumber').val();
            if (storage) {
                params.Storage = storage;
            }
            
            var warehouse = $('#warehouse').val();
            if (warehouse) {
                params.Warehouse = warehouse;
            }
            
            var supplierNumber = $('#supplierNumber').val();
            if (supplierNumber) {
                params.SupplierNumber = supplierNumber;
            }
            
            var supplierName = $('#supplierName').val();
            if (supplierName) {
                params.SupplierName = supplierName;
            }
            
            var storageValidity = $('#storageValidity').val();
            if (storageValidity) {
                params.Storagevalidity = storageValidity;
            }
            
            return params;
        }

                 // 渲染库存表格
        function renderInventoryTable(data) {
            var tbody = $('#tb');
            tbody.empty();

            if (data && data.length > 0) {
                $.each(data, function(index, item) {
                    var row = '<tr>' +
                        '<td>' + (item.productItem || '') + '</td>' +
                        '<td>' + (item.productName || '') + '</td>' +
                        '<td>' + (item.specs || '') + '</td>' +
                        '<td>' + (item.galleryNumber || '') + '</td>' +
                        '<td>' + (item.unit || '') + '</td>' +
                        '<td>' + (item.storage || '') + '</td>' +
                        '<td>' + (item.warehouse || '') + '</td>' +
                        '<td>' + (item.reservoirArea || '') + '</td>' +
                        '<td>' + (item.binLocation || '') + '</td>' +
                        '<td>' + (item.supplierNumber || '') + '</td>' +
                        '<td>' + (item.supplierName || '') + '</td>' +
                        '<td>' + (item.supplierAbbreviation || '') + '</td>' +
                        '<td>' + (item.produceTickets || '') + '</td>' +
                        '<td>' + (item.storageDate ? formatDate(item.storageDate) : '') + '</td>' +
                        '<td>' + (item.storagevalidity ? formatDate(item.storagevalidity) : '') + '</td>' +
                        '</tr>';
                    tbody.append(row);
                });
            } else {
                tbody.append('<tr><td colspan="15" style="text-align: center;">暂无数据</td></tr>');
            }
        }

        // 格式化日期显示
        function formatDate(dateString) {
            if (!dateString) return '';
            var date = new Date(dateString);
            var year = date.getFullYear();
            var month = String(date.getMonth() + 1).padStart(2, '0');
            var day = String(date.getDate()).padStart(2, '0');
            return year + '-' + month + '-' + day;
        }

        // 全局函数
        window.searchInventory = function() {
            loadInventoryData();
        };

        window.resetForm = function() {
            $('#productCode').val('');
            $('#productName').val('');
            $('#batchNumber').val('');
            $('#warehouse').val('');
            $('#supplierNumber').val('');
            $('#supplierName').val('');
            $('#storageValidity').val('');
            selectedMaterialTypeId = null;
            
            // 重置树选中状态
            $('.layui-tree-txt').removeClass('selected');
            
            // 隐藏选中分类信息
            $('#selectedCategoryInfo').hide();
            
            loadInventoryData();
        };
    });
</script>
